<!DOCTYPE html>
<html>
<head>
  <title>海国Map</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="keywords" content="地图 国家 全球 gdp 地理 宏观 数据 海国图志 海国Map">
  <meta name="description" content="全球经济与人口地图">
  <link rel="shortcut icon" href="static/favicon.ico" />
  <link rel="bookmark"href="static/favicon.ico" />

  <link rel="stylesheet" type="text/css" href="https://static.liangchao.site/bootstrap4.0.0.min.css">
  <script src="https://static.liangchao.site/jquery3.2.1.min.js" type="text/javascript" ></script>
  <script src="https://static.liangchao.site/popper1.15.min.js" type="text/javascript" ></script>
  <script src="https://static.liangchao.site/bootstrap4.0.0.min.js" type="text/javascript" ></script>
  <script src="https://static.liangchao.site/vue.js" type="text/javascript" ></script>

  <link rel="stylesheet" href="https://static.liangchao.site/font-awesome.min.css">
  
  <!-- 弹出框相关 js -->
  <script src="static/mSlider.js"></script>

  <!-- 地图相关 js -->
  <script src="static/core.js"></script>
  <script src="static/maps.js"></script>
  <script src="static/worldLow.js"></script>
  <script src="static/dark.js"></script>
  <script src="static/animated.js"></script>
  <script src="static/cn_ZH.js"></script>

  <!-- 定制css -->
  <link rel="stylesheet" type="text/css" href="static/darktheme.css">
  <link rel="stylesheet" type="text/css" href="static/custom.css">

  <link rel="stylesheet" href="static/bootstrap-select.min.css">
  <script src="static/bootstrap-select.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-sm navbar-dark">
      
      <a class="navbar-brand" href="#" id="icon">
        <i class="fa fa-anchor" aria-hidden="true"></i>
        <span class="font-weight-light">海国Map</span>
      </a>

      <select id="countries_data" class="selectpicker" data-live-search="true" data-actions-box="true" data-size=5 data-live-search-placeholder="输入国家名" data-none-selected-text="输入国家名">
        <option hidden ></option>
        <option v-for="(item, index) in items" :key="index" :value="item.id">
          {{ item.cname }}
        </option>
      </select>
      <script type="text/javascript" src="static/select_item.js"></script>
    </nav>

    <div class="row">
      <div id="chartdiv" class="col-md-12">
      </div>

        <div class="wrap">
          <div class="layer-right">
            <div id="country_container">
              
              <h1>
                <strong id="country_name"></strong>
                <img src="" id="country_flag"  class="img-rounded">
              </h1>
              <h6>
                <small id="country_en_name"></small>
                <br>
                <small id="country_cname"></small>
              </h6>
              <br>
              <dl class="dl-horizontal">
                <dt>人口</dt>
                <dd id="population">...</dd>
                <dt>宗教</dt>
                <dd id="mainreligion">...</dd>
                <dt>政治体制</dt>
                <dd id="political">...</dd>
                <dt>首都</dt>
                <dd id="capital">...</dd>
                <dt>主要城市</dt>
                <dd id="maincity">...</dd>
                <dt>货币</dt>
                <dd id="currency">...</dd>
                <dt>GDP</dt>
                <dd id="gdp">...</dd>
                <dt>人均GDP</dt>
                <dd id="avggdp">...</dd>
              </dl>
            </div>
          </div>
        </div>

      <script type="text/javascript" src="static/custom.js"></script>
    </div>
  </div>

  <footer class="footer">
    <br>
    <p class="text-center"></p>
  </footer>

  <script type="text/javascript" src="static/footer.js"></script>
</body>
</html>